<template>
  <div class="qixing">
    <!--底部弹窗-->
    <Popup v-model:show="show" position="bottom" :round="true" :style="{ height: '80%', background: 'transparent' }">
      <div class="popup qxcbet">
        <!--头部-->
        <div class="popup-header">
          <div class="top-box row-space-between">
            <div class="left-box all-center">
              <div class="content"></div>
            </div>
            <div class="center-box all-center">
              单期最高派奖{{ numberToChinese(allGame?.[currentGame]?.maxReward) }}万
              <!-- <div class="content" @click="show = !show"></div> -->
            </div>
            <div class="right-box all-center" @click="show = !show">
              <Icon name="arrow-down" color="#FFFFFF" size="22" />
            </div>
          </div>
          <!--玩法菜单-->
          <div class="navMenu">
            <Handicap @update-template="template"/>
            <div class="popup-select-type">
              <div
                class="li"
                v-for="(item, index) in playTypeNames"
                :class="actives === index ? 'actives' : ''"
                @click="gameMenu(index, item)"
                :key="item.playTypeCode"
              >
                {{ item.playTypeName }}
                <span class="bet-count" v-if="betInfoData[item.playTypeCode].DWCOUNT">
                  {{ betInfoData[item.playTypeCode].DWCOUNT || '' }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="pop">
          <!--三位形态菜单-->
          <div class="popup-rg" v-if="actives === 0">
            <div class="type-info">
              <div>
                <span class="label">当前玩法：</span>
                <template v-if="Object.keys(betInfo)?.length">{{ getText() }}{{ DW_INFO }}</template>
              </div>
              <div v-if="maxOdds > 0 && Object.keys(betInfo)?.length">
                <span class="label">赔率：</span>
                {{ maxOdds }}倍
              </div>
            </div>
            <div class="pop-rg">
              <BetCard :betInfo="betInfo" :hideMaskType="hideMaskType" title="千位" type="qian" @setData="betData" />
              <BetCard :betInfo="betInfo" :hideMaskType="hideMaskType" title="百位" type="bai" @setData="betData" />
              <BetCard :betInfo="betInfo" :hideMaskType="hideMaskType" title="十位" type="shi" @setData="betData" />
              <BetCard :betInfo="betInfo" :hideMaskType="hideMaskType" title="个位" type="ge" @setData="betData" />
              <BetCard :betInfo="betInfo" :hideMaskType="hideMaskType" title="五位" type="wu" @setData="betData" />
            </div>
          </div>
          <div class="popup-rg" v-if="actives === 1">
            <div class="pop-rg">
              <ul class="zixian-select">
                <li
                  v-for="(item, index) in playTypeNames[1].lotteryPlayTypeList"
                  :key="`zixian-${index}`"
                  @click="setZixianType(index)"
                  :class="{ active: zixianType === index }"
                >
                  {{ item.playTypeName }}
                </li>
              </ul>
              <BetCard :betInfo="betInfo" title="第一位" type="yi" @setData="betData" />
              <BetCard :betInfo="betInfo" title="第二位" type="er" @setData="betData" v-if="zixianType > 0" />
              <BetCard :betInfo="betInfo" title="第三位" type="san" @setData="betData" v-if="zixianType > 1" />
              <BetCard :betInfo="betInfo" title="第四位" type="si" @setData="betData" v-if="zixianType > 2" />
            </div>
          </div>
          <!--数字单点-->
          <div class="popup-rg" v-if="actives === 2 && playTypeNames[2].lotteryPlayTypeList.length > 0">
            <div class="pop-tailbox">
              <div class="pop-tailnum">
                <div
                  class="pop-tailboxbox"
                  v-for="(item, index) in playTypeNames[2].lotteryPlayTypeList"
                  :class="{ popactives: item['bOn'] }"
                  :key="index"
                >
                  <LiangMianCard
                    ref="QXCEM"
                    :betInfo="betInfo"
                    :type="item.playTypeCode"
                    :lottList="item"
                    @setData="betData"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="popup-rg" v-if="actives === 3">
            <div class="pop-tailbox">
              <div class="pop-tailnum">
                <div
                  class="pop-tailboxbox"
                  v-for="(item, index) in playTypeNames[3].lotteryPlayTypeList"
                  :class="{ popactives: item['bOn'] }"
                  :key="index"
                >
                  <HeZhiCard
                    ref="HZ"
                    :betInfo="betInfo"
                    :type="item.playTypeCode"
                    :lottList="item"
                    @setData="betData"
                  />
                </div>
              </div>
            </div>
          </div>
          <!--尾项菜单-->
          <investPopup @betNow="betNow" @updateInvestList="orderClearAll" gameType="qxc" @delSingle="delSingle" />
        </div>
      </div>
    </Popup>
  </div>
</template>

<script>
import BetCard from './BetCard.vue'
import LiangMianCard from './LiangMianCard.vue'
import investPopup from '@/components/invest-popup.vue'
import HeZhiCard from './HeZhiCard.vue'
import { mapActions, mapGetters, mapState } from 'pinia'
import { playNameConvert } from '@/config/qixingcai'
import { useInvestStore } from '@/stores/invest'
import { useGameStore } from '@/stores/game'
import { findOrderPage, getLotteryTemplate, submitBetNow } from '@/api'
import { useXglhcStore } from '@/stores/xglhc'
import { showToast } from 'vant'
import dayjs from 'dayjs'
import { numberToChinese } from '@/utils'
import { Popup, Icon } from 'vant'
import Handicap from '@/components/Handicap.vue'

export default {
  components: {
    BetCard,
    investPopup,
    LiangMianCard,
    HeZhiCard,
    Popup,
    Icon,
    Handicap,
  },
  data() {
    return {
      playNameConvert,
      cancelOrder: false, //展示 投注撤单
      betInfo: {},
      show: false,
      value: '',
      showsh: 0,
      actives: 0,
      activeti: 100,
      activete: 100,
      popactives: 1000,
      showsho: false,
      showshoAll: false,
      digit: '',
      playTypeName: [],
      playTypeNames: [], //所有渲染数据
      betAmount: '', //下注金额
      starttime: '',
      endtime: '',
      findOrderSums: [],
      cancelOrderAll: [], //要撤销的订单列表
      placebets: true, //
      Note: 0, //注数
      totalMoney: 0, //下注总钱数
      notes: true,
      cancelShurItem: '', //要撤销的订单单项
      cancelId: [], //要撤销的订单多项数组
      zixianType: 0,
      hideMaskType: 'wu',
      findOrderSumNewAll: [],
      DWCONFIG: {
        1: { key: 'YZDW', name: '一字定位' },
        2: { key: 'EZDW', name: '二字定位' },
        3: { key: 'SANZDW', name: '三字定位' },
        4: { key: 'SZDW', name: '四字定位' },
      },
      DWCOUNT: 0,
      DW_INFO: '',
      betInfoData: {
        ZDKX: { list: [], betInfo: {}, Note: 0 },
        ZXKX: { list: [], betInfo: {}, Note: 0 },
        QXCEM: { list: [], betInfo: {}, Note: 0 },
        HZ: { list: [], betInfo: {}, Note: 0 },
      },
      maxOdds: '',
      investStore: useInvestStore(),
      xglhcStore: useXglhcStore(),
    }
  },
  mounted() {
    this.template()
    this.digit = this.getSingleInvestMoney
  },
  computed: {
    ...mapGetters(useInvestStore, ['getSingleInvestMoney']),
    ...mapGetters(useGameStore, ['allGame', 'currentHandicapCode']),
    ...mapState(useGameStore, {
      currentGame: (state) => state.currentGame,
    }),
    ...mapState(useInvestStore, {
      inputMoney: (state) => state.inputMoney,
      investList: (state) => state.investList,
    }),
  },
  watch: {
    inputMoney: function (e) {
      this.digit = e
    },
    investList: {
      handler(e) {
        this.Note = e.length
        if (this.playTypeCode) {
          this.betInfoData[this.playTypeCode].Note = e.length
          // this.betInfoData[this.playTypeCode].list = e
          // this.investStore.setInvestNum(e)
          this.hideMaskType = this.filterMask()
        }
      },
      deep: true,
      immediate: true,
    },
    digit() {
      this.placebet()
    },
  },
  methods: {
    ...mapActions(useXglhcStore, ['init', 'setCurrentGameType', 'betNow', 'clearInvestList', 'fetchGameTemplateData']),

    numberToChinese,

    analyzeNumber(num, key) {
      if (this.actives === 0) {
        const filteredArray = num?.filter((item) => item.playTypeCode === key)
        return filteredArray ? filteredArray[0]?.cachePlayList[0]?.maxOdds : ''
      }
      if (this.actives === 1) {
        return num?.[this.zixianType]?.cachePlayList?.[0]?.maxOdds
      }
      return num?.[this.actives]?.cachePlayList?.[0]?.maxOdds
    },

    filterMask() {
      const inputArray = Object.keys(this.betInfo)
      const originalArray = ['ge', 'shi', 'bai', 'qian', 'wu']
      if (inputArray.length > 3) {
        const findDifference = (arr1, arr2) => arr1.filter((item) => !arr2.includes(item))
        const missingElement = findDifference(originalArray, inputArray)
        return missingElement[0]
      }
      if (inputArray.length === 0) return 'wu'
      return ''
    },
    betData(info) {
      if (info.data.length === 0) {
        this.DWCOUNT = 0
        delete this.betInfo[info.type]
        this.hideMaskType = 'wu'
        if (this.playTypeCode === 'ZDKX') {
          const betKeys = Object.keys(this.betInfo)
          this.DWCOUNT = betKeys.length
          if (betKeys.length === 1) {
            if (Reflect.has(this.betInfo, 'wu')) {
              this.resetSelectList()
            }
          }
        }
      } else {
        this.betInfo[info.type] = info.data
        this.hideMaskType = this.filterMask()
        if (this.playTypeCode === 'ZDKX') {
          const betKeys = Object.keys(this.betInfo)
          this.DWCOUNT = betKeys.length
        }
      }
      this.placebet()
    },
    open() {
      this.show = true
    },
    async betNow() {
      const params = {
        lotteryCode: 'QXC',
        orderDetails: this.investList,
      }
      if (this.currentHandicapCode) params.handicapCode = this.currentHandicapCode
      const { code } = await submitBetNow(params)
      if (code !== 200) return
      this.orderClearAll()
      showToast('下注成功')
    },
    //点击清除所订单弹窗 清空Btn
    orderClearAll() {
      this.DWCOUNT = 1
      this.betInfo = {}
      this.DW_INFO = ''
      this.maxOdds = ''
      this.resetSelectList()
    },
    //撤销订单
    cancelShur(index, item) {
      this.showsho = true
      this.cancelShurItem = item
    },
    //点击下方 撤单btn
    cancel() {
      this.cancelOrder = true
      this.findOrderSum()
    },
    startTime(value) {
      this.starttime = dayjs.utc(value).format('YYYY-MM-DD HH:mm:ss')
    },
    endTime(value) {
      this.endtime = dayjs.utc(value).format('YYYY-MM-DD HH:mm:ss')
    },
    formatter(val) {
      // eslint-disable-next-line
      return val.relace('/^[3-9]\d{0,4}$|^[1-9]\d{4,5}$|^100000$/')
    },
    //红色提示信息点击事件--投注之后
    findOrderSumClickIs() {
      this.cancelOrder = true
      this.findOrderSum()
    },
    //撤销投注
    findOrderSum() {
      let data = {
        lotteryCode: 'QXC',
        orderStatus: 0,
        startTime: dayjs().subtract(6, 'days').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs.utc().format('YYYY-MM-DD HH:mm:ss'),
        current: 1,
        size: 100,
      }
      findOrderPage(data).then((res) => {
        if (res.code === 200) {
          this.cancelOrderAll = res.data.records
          if (res.data.records === null) {
            this.cancelOrder = false
          }
          for (let i = 0; i < this.cancelOrderAll.length; i++) {
            this.cancelId.push(this.cancelOrderAll[i].id)
          }
        }
      })
    },
    replaceDigitsWithSymbols(inputString) {
      return inputString.replace(/\d/g, '⊡')
    },
    combineArraysToStrings(options) {
      const keys = ['qian', 'bai', 'shi', 'ge', 'wu'] // 定义位数的键
      const result = ['']
      keys.forEach((key) => {
        const values = options[key] || [] // 如果键不存在，将其值设置为一个空数组
        const nextResult = []
        if (values.length === 0) {
          values.push('')
        }
        values.forEach((value) => {
          result.forEach((str) => {
            nextResult.push(str + (value !== '' ? value : 'x'))
          })
        })

        result.length = 0
        result.push(...nextResult)
      })
      return result
    },
    placebet() {
      let orderDetails = []
      const betKeys = Object.keys(this.betInfo)
      const odds = this.analyzeNumber(
        this.playTypeNames[this.actives]?.lotteryPlayTypeList,
        this.DWCONFIG[this.DWCOUNT]?.key,
      )

      this.maxOdds = odds
      if (this.playTypeCode === 'ZDKX' && betKeys.length > 0) {
        const result = this.combineArraysToStrings(this.betInfo)
        result.forEach((item) => {
          orderDetails.push({
            lotteryCode: 'QXC', //球种
            playTypeCode: this.playTypeCode, //ZDKX 字定快选
            sonPlayTypeCode: this.DWCONFIG[betKeys.length].key,
            playCode: this.DWCONFIG[betKeys.length].key,
            betContent: item,
            playName: playNameConvert[this.DWCONFIG[betKeys.length].key],
            betAmount: this.digit,
            maxOdds: odds,
          })
        })

        this.DW_INFO = this.replaceDigitsWithSymbols(orderDetails[0].betContent)
      }
      // ===========递归算法end
      // 两面玩法/合值玩法
      if (this.playTypeCode === 'QXCEM' || this.playTypeCode === 'HZ') {
        betKeys.forEach((item) => {
          this.betInfo[item].forEach((item1) => {
            const obj = this.investList.find((ii) => ii.sonPlayTypeCode === item && ii.playCode === item1)
            orderDetails.push({
              lotteryCode: 'QXC', //球种
              playTypeCode: this.playTypeCode, //两面/合值
              playName: playNameConvert[item1],
              sonPlayTypeCode: item,
              playCode: item1,
              betContent: item1, //
              betAmount: obj?.betAmount ?? this.digit,
              maxOdds: odds,
            })
          })
        })
      }
      if (this.playTypeCode === 'ZXKX') {
        if (betKeys.length <= this.zixianType) {
          return this.investStore.setInvestNum([])
        }
        if (betKeys.length === 1) {
          //字现玩法
          betKeys.forEach((item) => {
            this.betInfo[item].forEach((item1) => {
              orderDetails.push({
                lotteryCode: 'QXC', //球种
                playTypeCode: this.playTypeCode,
                sonPlayTypeCode: 'YZX',
                playCode: 'YZX',
                betContent: item1, //
                playName: playNameConvert[item1],
                betAmount: this.digit,
                maxOdds: odds,
              })
            })
          })
        }
        // ===========递归算法
        // eslint-disable-next-line no-inner-declarations
        function combineArraysToThreeDigits(...arrays) {
          function combineHelper(currentArray, currentIndex) {
            if (currentIndex === arrays.length) {
              return [currentArray.map((x) => x.toString()).join('')]
            }
            const combinedResults = []
            for (let i = 0; i < arrays[currentIndex].length; i++) {
              const combined = combineHelper([...currentArray, arrays[currentIndex][i]], currentIndex + 1)
              combinedResults.push(...combined)
            }
            return combinedResults
          }
          return combineHelper([], 0)
        }
        // ===========递归算法end
        if (betKeys.length === 2) {
          //字现玩法
          const result = combineArraysToThreeDigits(this.betInfo['yi'], this.betInfo['er'])
          result.forEach((item) => {
            const _odds = this.getZxkxOdds(item)

            orderDetails.push({
              lotteryCode: 'QXC', //球种
              playTypeCode: this.playTypeCode,
              sonPlayTypeCode: 'EZX',
              playCode: 'EZX',
              betContent: item, //
              betAmount: this.digit,
              maxOdds: _odds,
            })
          })
        }
        if (betKeys.length === 3) {
          //字现玩法
          const result = combineArraysToThreeDigits(this.betInfo['yi'], this.betInfo['er'], this.betInfo['san'])
          result.forEach((item) => {
            const _odds = this.getZxkxOdds(item)
            orderDetails.push({
              lotteryCode: 'QXC', //球种
              playTypeCode: this.playTypeCode,
              sonPlayTypeCode: 'SANZX',
              playCode: 'SANZX',
              betContent: item, //
              betAmount: this.digit,
              maxOdds: _odds,
            })
          })
        }
        if (betKeys.length === 4) {
          const result = combineArraysToThreeDigits(
            this.betInfo['yi'],
            this.betInfo['er'],
            this.betInfo['san'],
            this.betInfo['si'],
          )
          result.forEach((item) => {
            const _odds = this.getZxkxOdds(item)
            orderDetails.push({
              lotteryCode: 'QXC', //球种
              playTypeCode: this.playTypeCode,
              sonPlayTypeCode: 'SZX',
              playCode: 'SZX',
              betContent: item, //
              betAmount: this.digit,
              maxOdds: _odds,
            })
          })
        }
        //字现算法优化 排序后去重
        // eslint-disable-next-line no-inner-declarations
        function processAndDeduplicateArrayByBetContent(arr) {
          // 定义处理数字字符串的函数
          function sortDigitsInNumberString(str) {
            const digits = Array.from(String(Number(str)))
            const sortedDigits = digits.sort((a, b) => a - b)
            return sortedDigits.join(' ') // 使用空格分开
          }
          const uniqueResults = new Set()
          // 处理每个元素，并按照需求排序 betContent
          arr.forEach((item) => {
            const sortedBetContent = sortDigitsInNumberString(item.betContent)
            // 使用一个新对象以保留其他键
            const newItem = { ...item, betContent: sortedBetContent }
            uniqueResults.add(JSON.stringify(newItem))
          })
          // 重新构建对象数组并还原
          return Array.from(uniqueResults).map((item) => JSON.parse(item))
        }
        orderDetails = processAndDeduplicateArrayByBetContent(orderDetails)
      }
      if (this.playTypeCode) {
        this.betInfoData[this.playTypeCode].DWCOUNT = orderDetails.length
      }
      //缓存数据
      if (this.playTypeCode) {
        this.betInfoData[this.playTypeCode].list = orderDetails
        this.betInfoData[this.playTypeCode].betInfo = this.betInfo
      }
      if (orderDetails.length > 100) {
        return this.Notify({ type: 'warning', message: '超过系统单次投注数据，请投注后再购买' })
      }
      let allList = []
      Object.keys(this.betInfoData).forEach((item) => {
        allList.push(...this.betInfoData[item].list)
      })
      this.investStore.setInvestNum(allList)
    },

    // 重复投注， 填充最后一期投注号码
    fillLastNumber() {
      const list = this.investStore.lastInvestList //最后投注记录
      this.investStore.setInvestNum(list)
    },

    //玩法菜单
    gameMenu(i, item) {
      this.actives = i
      this.playTypeCode = item.playTypeCode
      this.resetSelectList()
    },
    clear(key) {
      const r = this.$refs?.[key]
      r?.forEach((i) => {
        i?.clear?.()
      })
    },
    resetSelectList() {
      this.betInfo = {}
      this.betInfoData = {
        ZDKX: { list: [], betInfo: {}, Note: 0 },
        ZXKX: { list: [], betInfo: {}, Note: 0 },
        QXCEM: { list: [], betInfo: {}, Note: 0 },
        HZ: { list: [], betInfo: {}, Note: 0 },
      }
      if (this.playTypeCode === 'QXCEM') {
        this.clear('QXCEM')
      } else if (this.playTypeCode === 'HZ') {
        this.clear('HZ')
      }
      this.$refs?.[this.playTypeCode]?.clear?.()
      this.investStore.setInvestNum([])
    },
    setZixianType(item) {
      this.zixianType = item
      this.resetSelectList()
    },
    //彩种玩法投注模板
    template() {
      getLotteryTemplate({
        lotteryCode: this.currentGame,
        handicapCode: this.currentHandicapCode
      }).then((res) => {
        if (res.code === 200) {
          this.playTypeNames = res.data
          this.gameMenu(0, res.data[0])
          // this.playTypeCode = res.data[0].playTypeCode
        }
      })
    },
    getText() {
      if (this.actives !== 0) return

      this.DWCOUNT = Object.keys(this.betInfo).length

      return this.DWCONFIG[this.DWCOUNT].name
    },
    getZxkxOdds(betContent) {
      const arrs = betContent.split('')

      let count = 1

      arrs?.forEach?.((item) => {
        const reg = new RegExp(item, 'g')

        const list = betContent.match(reg)

        const len = list?.length

        count = len > count ? len : count
      })
      const oddsList = this.playTypeNames[this.actives].lotteryPlayTypeList?.[this.zixianType]?.cachePlayList?.[0]?.list

      return oddsList?.[count - 1]?.maxOdds
    },
    delSingle(item) {
      if (this.playTypeCode === 'QXCEM') {
        this.del('QXCEM', item)
      } else if (this.playTypeCode === 'HZ') {
        this.del('HZ', item)
      } else {
        // console.log('item', item)
        // console.log('this.betInfo', this.betInfo)
      }
    },

    del(key, item) {
      const r = this.$refs?.[key]
      r?.forEach((i) => {
        i?.delSingle?.(item)
      })
    },
  },
}
</script>

<style lang="less">
.qixing {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #000;
  .popup-top {
    height: 27px;
    position: relative;
  }
  .van-popup--bottom {
    height: 85% !important;
    .shureAddcancel {
      height: 100%;
      border-radius: 10px 10px 0 0;
    }
    .shurebox {
      height: calc(100% - 65px) !important;
    }
  }
  .top-box {
    box-sizing: border-box;
    height: 27px;
    width: 100%;
    padding: 0 15px;
    background: linear-gradient(180deg, #7065f0 0%, #5c52d4 100%);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;

    .left-box {
      height: 100%;
      width: 20px;
      max-width: 40px;
    }

    .center-box {
      height: 100%;
      flex: 1;
      .content {
        width: 41px;
        height: 3px;
        border-radius: 6px;
        background: #505e92;
      }
    }

    .right-box {
      width: 20px;
      max-width: 40px;
      height: 100%;
    }
  }
  .pop-tp-right.qxcbet {
    height: 100%;
    width: 50px;
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 14px;
      height: auto;
    }
  }
  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
  }
  .record-rg {
    width: 60%;
  }
  .hed-one {
    background: #fff !important;
    border: 1px solid #ff5069;
    color: #ff5069 !important;
    border-radius: 50%;
  }
  .hed-ones {
    display: none !important;
    padding: 0 !important;
  }
  //.van-dialog__header {
  //  color: #333;
  //}
  .dialogbox {
    padding: 20px 10px 20px 10px;
    .dialog {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .dialog-lfbox {
        flex: 1;
        color: #fff;
        .dialog-lf {
          color: #8089a6;
          width: 82px;
          height: 30px;
          line-height: 30px;
          background: url('@/assets/img/lf-btn.png') no-repeat;
          background-size: 100% 100%;
          margin: 0 auto;
        }
      }
      .dialog-rgbox {
        flex: 1;
        .dialog-rg {
          color: #fff;
          width: 82px;
          height: 30px;
          line-height: 30px;
          background-image: linear-gradient(to bottom, #809ff7, #4964c5);
          border-radius: 5px;
          margin: 0 auto;
        }
      }
    }
  }
  .van-popup {
    // padding: 0 10px;
    background: transparent;
    // overflow: hidden;
  }

  .popup.qxcbet {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding-top: 108px;
    overflow-x: hidden;
    background: rgba(23, 26, 38, 1);

    .popup-header {
      position: absolute;
      width: 100%;
      top: 0;
    }
    .navMenu {
      padding: 12px 0 0 10px;
      box-sizing: border-box;
    }
    .popup-select-type {
      margin-top: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      .li {
        color: #8598bb;
        border: 0.5px solid #2c3454;
        background: linear-gradient(180deg, #333950 0%, #24253d 100%);
        border-radius: 5px;
        padding: 0 8px;
        height: 24px;
        margin-right: 9px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .bet-count {
        height: 15px;
        margin-left: 5px;
        min-width: 20px;
        background-color: #fff;
        color: #3d39f4;
        font-size: 11px;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
      }
      .actives {
        border-color: #2f20be;
        background: linear-gradient(180deg, #7153ed 0%, #4c3ecf 53.93%, #7257ff 100%),
          radial-gradient(53.32% 27.38% at 50% 100%, #7958fd 0%, rgba(88, 154, 253, 0) 100%),
          radial-gradient(55.41% 21.83% at 50% 6.75%, rgba(188, 207, 255, 0.4) 0%, rgba(124, 137, 255, 0) 100%);

        color: #fff;
      }
    }
    .popup-top.qxcbet {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 10px 13px;
      .top-line {
        display: inline-block;
        width: 41px;
        height: 3px;
        background: #505e92;
        border-radius: 6px;
        margin: 0 auto;
      }
      .pop-tp-center {
        width: 50px;
        height: 3px;
        margin-top: 2px;
        border-radius: 2px;
        background: #505e92;
      }
      .pop-tailtext {
        font-size: 10px;
        color: #7084ce;
        text-align: left;
        //margin-left: 0spx;
        .span1 {
          font-size: 10px;
          color: red;
          .span2 {
            font-size: 12px;
          }
        }
      }
    }
    .pop {
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-start;
      box-sizing: border-box;
      overflow: scroll;
      height: 100%;

      .popup-rg {
        width: 100%;
        flex: 1;
        border-radius: 5px;
        padding-bottom: 160px;
        box-sizing: border-box;
        .type-info {
          font-size: 12px;
          color: #ff0808;
          padding-left: 12px;
          display: flex;
          > div {
            margin-right: 15px;
          }
          .label {
            color: #fff;
          }
        }
        .pop-tailbox {
          .pop-tailtext {
            font-size: 10px;
            color: #7084ce;
            text-align: left;
            margin-left: 0;
            .span1 {
              font-size: 10px;
              color: red;
              .span2 {
                font-size: 12px;
              }
            }
          }
          .pop-tailnum {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
            .pop-tailboxbox {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              width: 100%;
              padding: 0 5px;
              .pop-tailnums {
                width: 19px;
                height: 19px;
                margin-right: 2px;
                border: 1px solid #a2b6ff;
                border-radius: 50%;
                background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
                line-height: 19px;
                color: #3d65fb;
              }
              .pop-tailnumss {
                color: #7b85a6;
                font-size: 11px;
                margin-left: 2px;
              }
            }
            .popactives {
              background: #3d65fb;
              .pop-tailnumss {
                color: #ffff;
              }
              .pop-tailnums {
                width: 17px;
                height: 17px;
                border: 1px solid #a2b6ff;
                border-radius: 50%;
                background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
                line-height: 17px;
                color: #7b85a6;
              }
            }
          }
        }
        .zixian-select {
          display: flex;
          li {
            background: linear-gradient(180deg, #333950 0%, #24253d 100%);
            width: 64px;
            height: 22px;
            margin-right: 8px;
            border-radius: 5px 5px 0 0;
            color: #8598bb;
            font-size: 12px;
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: center;
            &.active {
              background: linear-gradient(354deg, #3d35c6 4.34%, #6c4fe0 95.73%);
              color: #fff;
            }
          }
        }
        .pop-rg {
          box-sizing: border-box;
          margin-left: 5px;
          padding: 3px;
          border-radius: 5px;
          .pop-text {
            font-size: 10px;
            color: #7084ce;
            text-align: left;
          }
          .pop-namebox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 5px;
            .pop-name {
              border: 1px solid #afbdef;
              border-radius: 5px;

              width: 22%;
              color: #5e6994;
              margin: 0 2px;
              padding: 1px 0;
              background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
              .pop-names {
                font-size: 10px;
              }

              .pop-texts {
                font-size: 9px;
              }
            }
            .activeti {
              background: #3d65fb;
              color: #c1bebe;
            }
          }
        }
        .poprg-btm {
          .pop-text {
            font-size: 10px;
            color: #7084ce;
            text-align: left;
            margin-left: 10px;
          }
          .pop-namebox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .pop-name {
              border: 1px solid #4570f2;
              border-radius: 50%;
              color: #4570f2;
              width: 23.5px;
              height: 23.5px;
              margin: 3px 6px;
              line-height: 23.5px;
              background-image: linear-gradient(to bottom, #ffffff, #e8eefa);
              .pop-names {
                position: relative;
                font-size: 12px;
                span {
                  position: absolute;
                  bottom: -6px;
                  right: -6px;
                  width: 17px;
                  height: 17px;
                  display: inline-block;
                  background: gray;
                  border-radius: 50%;
                  color: #fff;
                  line-height: 20px;
                  text-align: center;
                  font-size: 9px;
                }
              }
            }
            .activete {
              background-image: linear-gradient(to bottom, #6a98ff, #254ee7);
              color: #fff;
            }
          }
        }
      }
    }
  }

  .qixing {
    overflow: hidden;
    margin-top: -1px;
    box-sizing: border-box;
    position: relative;
  }
}
</style>
